<template>
  <div id="goods">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <p class="num">共{{talentList.length}}条结果</p>
        <div class="box" v-for="(item, i) in talentList" :key="i + 't'">
          <!-- <van-image round :src="" /> -->
          <div class="left">
            <img :src="item.logo" />
          </div>
          <div class="right">
            <div class="details">
              <!-- 商品名称 -->
              <p class="name">{{ item.nickName }}</p>
              <span class="type">￥55</span>
              <!-- 价格 -->
              <div class="total">
                <div>
                  <span>{{ format_num(item.totalFans) }}</span>
                  <span>销量</span>
                </div>
                <div>
                  <span>{{ format_num(item.totalFavorite) }}</span>
                  <span>销售额</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </van-list>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  name: '',
  components: {},
  data() {
    return {
      page: 1,
      pageSize: 20,
      talentList: [],
      //触底
      loading: false,
      finished: false,
      refreshing: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.GetTalentList()
  },

  methods: {
    //接口数据
    GetTalentList() {
      if (this.talentList.length == 0) {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        })
      }
      this.loading = true
      this.$axios
        .get('/api/collection/GetAuthorsCollection', {
          params: {
            pageIndex: this.page,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            Toast.clear()
            this.talentList = this.talentList.concat(res.data.data)
            this.loading = false
            this.refreshing = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //触底
    onLoad() {
      this.loading = true
      if (this.page * this.pageSize > this.talentList.length) {
        this.loading = false
        //this.finished = true;
      } else if (this.talentList.length > 0) {
        this.page = this.page + 1
        this.GetTalentList()
      }
    },
    //上拉刷新
    onRefresh() {
      // 清空列表数据
      // this.finished = true;
      this.pageIndex = 1
      // this.talentList = [];
      this.GetTalentList()
    },
  },
}
</script>

<style lang='less' scoped>
//@import url();
#goods {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  //  显示搜索数量
  .num {
    width: 100%;
    font-size: 0.373333rem;
    line-height: 0.373333rem;
    padding: 0.37333rem 0 0.266rem 0.1rem;
  }
  .box {
    width: 9.2rem;
    margin: 0 auto;
    // height: 2.266667rem;
    background-color: #ffffff;
    border-radius: 0.133333rem;
    display: flex;
    margin-bottom: 0.2rem;
    // 商品图片
    .left {
      width: 28.98%;
      padding: 0.266667rem;
      box-sizing: border-box;
      > img {
        width: 100%;
        display: block;
        border: 1px solid transparent;
        border-radius: 14px;
      }
    }
    // 右侧部分
    .right {
      width: 71%;
      .details {
        width: 6.4rem;
        // 商品图片
        .name {
          height: 0.48rem;
          font-size: 0.373rem;
          font-weight: 600;
          color: #222;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-top: 0.266rem;
        }
        .type {
          display: block;
          line-height: 0.8rem;
          font-size: 0.373rem;
          color: #ff0000;
        }
        // 价格
        .total {
          display: flex;
        }
        .total div {
          width: 2.88rem;
        }
        .total div > span:nth-child(1) {
          display: block;
          font-family: Dinpro-medium;
          font-size: 0.266667rem;
          line-height: 0.48rem;
        }
        .total div > span:nth-child(2) {
          display: block;
          font-size: 0.266rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 0.37rem;
          letter-spacing: 0px;
          color: #888888;
        }
      }
    }
  }
}

//解决下拉刷新与标题切换问题
.van-pull-refresh {
  overflow: auto !important;
}
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>